<template>
    <div>
        <div class="foot">
 
   <ul>
     <li v-for="(item,index) in ImgList" :key="index" @click="GePerson(item.path)">
       <img :src="item.imgp" alt="">
       <p>{{item.name}}</p>
     </li>
     <!--  <li>
       <img src="@/assets/暂无消息.png" alt="" width=".42rem">
       <p>系统功能</p>
     </li>
      <li @click="GePerson">
       <img src="@/assets/个人中心.png" alt="">
       <p>个人中心</p>
     </li> -->
    
   </ul>
</div>
    </div>
</template>

<script>

export default {
    data () {
        return {
       ImgList:[
           {
                imgp:"../../assets/系统功能.png",
                name:"系统功能",
                path:"/home"
           },
           {
                imgp:"../../assets/暂无消息.png",
                name:"联系",
                path: '/contact'
           },
           {
                imgp:"../../assets/个人中心.png",
                name:"个人中心",
                path:'/userfriendly'
           }
       ]
        }
    },
    methods:{
        /* 跳转到个人中心页面 */
      GePerson(val){
         this.$router.push(val)
        
      }
    }
}
</script>
<style lang = "less" scoped>
    .foot{
      z-index: -1;
     font-size: .16rem;
     height: .6rem;
     background: #ffffff;
     position: fixed;
     width: 100%;
     bottom: 0;
     left: 0;
   
     ul{
       display: flex;
       height: 100%;
       li{
         height: 100%;
         padding: .1rem 0;
         flex: 1;
         text-align: center;
         color: #999;
         font-size: .12rem;
         img{
           width: .2rem;
           height: .2rem;
         }
       }
     }
   }
</style>